<template>
  <div class="xtx-pagination" v-if="myTotal > 0">
    <a @click="changePage(myCurrentPage - 1)" href="javascript:;" :class="{ disabled: myCurrentPage === 1 }">上一页</a>
    <span v-if="pager.start > 1">...</span>
    <a href="javascript:;" @click="changePage(i)" :class="{ active: i === myCurrentPage }" v-for="i in pager.btnArr"
      :key="i">{{ i }}</a>
    <span v-if="pager.end < pager.pageCount">...</span>
    <a @click="changePage(myCurrentPage + 1)" href="javascript:;"
      :class="{ disabled: myCurrentPage === pager.pageCount }">下一页</a>
  </div>
</template>
<script setup>
import { computed, ref, defineProps, watch, defineEmits } from 'vue'
const props = defineProps({
  // 总记录数
  total: {
    type: Number,
    default: 100
  },
  // 当前页
  currentPage: {
    type: Number,
    default: 1
  },
  // 每页显示的条数
  pageSize: {
    type: Number,
    default: 10
  }
})
const emit = defineEmits(['page-change'])
// 总条数
const myTotal = ref(100)
// 每页条数
const myPageSize = ref(10)
// 当前第几页
const myCurrentPage = ref(3)
// 按钮个数
const btnCount = 5
watch(props, (newVal) => {
  // console.log(newVal)
  myTotal.value = newVal.total
  myPageSize.value = newVal.pageSize
  myCurrentPage.value = newVal.currentPage
}, { immediate: true })
// 重点：根据上述数据得到（总页数，起始页码，结束页码，按钮数组）
const pager = computed(() => {
  // 计算总页数
  const pageCount = Math.ceil(myTotal.value / myPageSize.value)
  // 1. 理想情况根据当前页码，和按钮个数可得到
  let start = myCurrentPage.value - Math.floor(btnCount / 2)
  let end = start + btnCount - 1
  // 2.1 如果起始页码小于1了，需要重新计算
  if (start < 1) {
    start = 1
    end = start + btnCount - 1 > pageCount ? pageCount : start + btnCount - 1
  }
  // 2.2 如果结束页码大于总页数，需要重新计算
  if (end > pageCount) {
    end = pageCount
    start = (end - btnCount + 1) < 1 ? 1 : (end - btnCount + 1)
  }
  // 处理完毕start和end得到按钮数组
  const btnArr = []
  for (let i = start; i <= end; i++) {
    btnArr.push(i)
  }
  return { btnArr, pageCount, start, end }
})
// 更改页码
function changePage(page) {
  // 如果点击的页码就是当前的页码，就不需要做任何处理
  if (page === myCurrentPage.value) return
  myCurrentPage.value = page
  // 将页码的改变通知父组件
  emit('page-change', page)
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;

  >a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;

    &:hover {
      color: @xtxColor;
    }

    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;

      &:hover {
        color: #333
      }
    }
  }

  >span {
    margin-right: 10px;
  }
}
</style>